<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="createNode">
        新建节点
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width:100%;margin-top: 15px;"
    >
      <el-table-column align="center" prop="nodeid" label="节点ID" min-width="8%" />
      <el-table-column align="center" prop="nodename" label="节点名称" min-width="8%" />
      <el-table-column align="center" prop="instanceCount" label="实例数量" min-width="5%" />
      <el-table-column align="center" prop="healthyCount" label="健康实例数" min-width="5%" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="nodePageListData" />
    <el-dialog v-loading="listLoading" :title="title" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
        <el-form-item label="节点名称:" prop="nodename">
          <el-input v-model="temp.nodename" placeholder="Please input node name" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" placeholder="Please input remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="postNodeData">
          创建
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getnodeList } from '@/api/node'
import { addnode } from '@/api/node'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      total: 0,
      title: '创建节点',
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        nodename: ''
      },
      temp: {
        nodename: '',
        remark: ''
      }
    }
  },
  created() {
    this.nodePageListData()
  },
  methods: {
    nodePageListData() {
      this.listLoading = true
      getnodeList({ pageNum: this.listQuery.pageNum, pageSize: this.listQuery.pageSize, nodename: this.listQuery.nodename }).then(response => {
        this.total = response.data.total
        console.log(this.total)
        this.list = response.data.list
        this.listLoading = false
      })
    },
    showsucess(msg) {
      this.$message({
        message: msg,
        type: 'success',
        duration: 5 * 1000
      })
    },
    createNode() {
      this.resetTemp()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    postNodeData() {
      this.listLoading = true
      addnode({ nodename: this.temp.nodename, remark: this.temp.remark }).then(response => {
        this.listLoading = false
        if (response.code === '0') {
          this.dialogFormVisible = false
          this.showsucess(response.msg)
          this.nodePageListData()
        }
      })
    },
    resetTemp() {
      this.temp = {
        nodename: '',
        remark: ''
      }
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

